<template>
	<view>
			<view class="status" :style="{ position: headerPosition }"></view>	
		    <view class="header" :style="{ position: headerPosition }">
			<!-- 定位城市 -->

			<!-- 搜索框  -->
			<view class="input-box">
				<input
					placeholder="请输入查询关键字"
					placeholder-style="color:#c0c0c0;"
				     v-model="queryStr"
				/>
				<!-- <view class="lg text-gray icon-search"></view> -->
			</view>
			<view class="" style="margin-top: 1px;">
			<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="0==TabCur?'text-orange cur':''"  @tap="tabh" :data-id="0">
					H5
				</view>
				<view class="cu-item flex-sub" :class="1==TabCur?'text-orange cur':''"  @tap="tabh" :data-id="1">
					PPT
				</view>	 					
			</view>
		</scroll-view>								
			</view>
		</view>		
	<!-- jiange	 -->
	<view class="place"></view>

    <!-- 模板开始 -->
		<view class="uni-product-list" v-if="mbt">
			<view class="uni-product muban-border" v-for="(product,indexs) in mubanList" :key="indexs" @click="mban_ck(product.infoid)">
				<view class="image-view">
					<image  class="uni-product-image" :src="product.img"></image>
				</view>
				<view class="uni-product-title">{{product.title}}</view>
				<view class="uni-product-price">
	                <text class="uni-product-price-original" style="font-weight: 700;">￥{{product.jqian}}</text>					
					<text class="uni-product-price-favour">￥5.98</text>
					<text class="uni-product-tip">{{product.fenlei}}</text>
				</view>
			</view>
		</view>		
	<!-- 模板结束	 --> 
	
    <!-- ppt开始 -->
		<view class="uni-product-list" v-if="pt">
			<view class="uni-product muban-border" v-for="(ppt,indexsp) in pptList" :key="indexsp" @click="ppt_ck(ppt.infoid)">
				<view class="image-view">
					<image  class="uni-product-image" :src="ppt.slimg"></image>
				</view>
				<view class="uni-product-title">{{ppt.title}}</view>
				<view class="uni-product-price">
	                <text class="uni-product-price-original" style="font-weight: 700;">￥{{ppt.money}}</text>					
					<!-- <text class="uni-product-price">￥5.98</text> -->
					<text class="uni-product-tip">{{ppt.type}}</text>
				</view>
			</view>
		</view>		
	<!-- ppt结束	 --> 		
	</view>
</template>

<script>
	var page=1;
const debounce = (function() {
    let timer = 0;
    return function(func, delay) {
      clearTimeout(timer);
      timer = setTimeout(func, delay);
    };
})();	
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				TabCur: 0,
				scrollLeft: 0,
				PageCur:0,
				headerPosition: 'fixed',
				mubanList : [],
				pptList:[],
				pt:false,
				mbt:true,
                queryStr: ''

			};
		},
		
		onLoad() {
		page = 1;
		mubanList : [];
		this.getNewsList();	
		pptList :[]	;
		}, 
		
	watch: {
    queryStr() {
      debounce(() => {
		page = 1;
			
		if(this.pt==true){			
		this.pptList = [];		
		this.getPptList();	
		}else{			
		this.mubanList = [];	
		this.getNewsList()			
		}
      }, 200);
    },
},			
    //		
			onPageScroll(e) {
			//兼容iOS端下拉时顶部漂移
			if (e.scrollTop >= 0) {
				this.headerPosition = 'fixed';
			} else {
				this.headerPosition = 'absolute';
			}
		},
	//下拉刷新
	onPullDownRefresh : function(){
		// 重置分页及数据
		page = 1;		
		if(this.pt==true){			
		this.pptList = [];		
		this.getPptList();	
		}else{			
		this.mubanList = [];	
		this.getNewsList()			
		}
	},
	// 加载更多
	onReachBottom : function(){	
		if(this.pt==true){
		this.getPptList();	
		}else{			
		this.getNewsList();
		}	
	},		
	
		methods: {
			searchIcon(e) {
				let key = e.detail.value.toLowerCase();
				let list = this.icon;
				this.icon = list
			},		
			//模板请求开始
				getNewsList: function(){
				uni.showLoading({});
				//页数(模板页面不控制页数，无限刷)
				// if(page >= 10){
				// 	  setTimeout(function () {
				// 	uni.showToast({"title":"已经加载全部", icon:"none"});
				// 	},1000);
				// 	return ;
				// }
				console.log(this.queryStr);
				uni.request({
				url: 'https://api.xuejss.com/xue/?s=muban.muban_list&page='+page+'&keyword='+this.queryStr,
				method: 'GET',
				data: {},
					success: res => {
						//console.log(res);
						if(res.data.code==-2){
						    uni.showToast({"title":"已经加载全部", icon:"none"});	
							uni.hideLoading(); 
							
						}else{
						var newsList = res.data.data.mblist;
						this.mubanList = this.mubanList.concat(newsList);

                        uni.hideLoading();
						page++;	
							
						}

					},
					complete: res => {
						uni.hideLoading();
						uni.stopPullDownRefresh();
					}
				});
			},	
			
	//ppt请求开始
		getPptList: function(){
		uni.showLoading({});
		//页数（无限刷）
		// if(page >= 10){
		// 	  setTimeout(function () {
		// 	uni.showToast({"title":"已经加载全部", icon:"none"});
		// 	},1000);
		// 	return ;
		// }
		console.log(this.queryStr);
		uni.request({
		url: 'https://api.xuejss.com/xue/?s=ppt.ppt_list&page='+page+'&keyword='+this.queryStr,
		method: 'GET',
		data: {},
			success: res => {
				console.log(res.data.data.ppt_list);
				if(res.data.code==-2){
					uni.showToast({"title":"PPT全部加载完成", icon:"none"});	
					uni.hideLoading(); 
					
				}else{
				var PTList = res.data.data.ppt_list;
				this.pptList = this.pptList.concat(PTList);
	
	            uni.hideLoading();
				page++;	
					
				}
	
			},
			complete: res => {
				uni.hideLoading();
				uni.stopPullDownRefresh();
			}
		});
	},			
			
			
			mban_ck(url){
				uni.navigateTo({
					url:'../goods/goods?infoid=' + url
				})
			},					
			
			ppt_ck(url){
				uni.navigateTo({
					url:'../goods/ppt_info?id=' + url,
				     animationType: 'slide-in-bottom',
					 animationDuration: 200	
				})
			},				
			  		
			tabh(e) {
				this.TabCur = e.currentTarget.dataset.id;
				console.log(this.TabCur);
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				if(this.TabCur==0){
				this.mbt=true;
				this.pt=false	
				}else{
					page=1;
				this.mbt=false;
				this.pt=true;
				this.pptList=[]	;
				this.getPptList()	
				}
			},
			
			
				
				
		}
	}
</script>
<style>
/* product */
.uni-product-list {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    flex-direction: row;
}

.uni-product {
    padding: 20upx;
    display: flex;
    flex-direction: column;
}

.image-view {
    height: 586.96upx;
    width: 330upx;
	margin:12upx 0;
}

.uni-product-image {
    height: 586.96upx;
    width: 330upx;
}

.uni-product-title {
    width: 300upx;
    word-break: break-all;
    display: -webkit-box;
    overflow: hidden;
	line-height:1.5;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.uni-product-price {
	margin-top:10upx;
    font-size: 28upx;
	line-height:1.5;
    position: relative;
}

.uni-product-price-original {
    color: #e80080;
}

.uni-product-price-favour {
    color: #888888;
    text-decoration: line-through;
    margin-left: 10upx;
}

.uni-product-tip {
    position: absolute;
    right: 10upx;
    background-color: #e0409ab0;
    color: #ffffff;
    padding: 0 10upx;
    border-radius: 5upx;
}	
</style>

<style lang="scss">
	.status {
		width: 100%;
		height: 0;
		position: fixed;
		z-index: 10;
		background-color: #fff;
		top: 0;
		/*  #ifdef  APP-PLUS  */
		height: var(--status-bar-height); //覆盖样式
		/*  #endif  */
	}
	
	.header {
		width: 100%;
		padding: 0 4%;
		height: 120upx;
		display: flex;
		align-items: center;
		position: fixed;
		border-bottom:1px solid #eccff1;
		top: 0;
		z-index: 10;
		background-color: #fff;
		/*  #ifdef  APP-PLUS  */ 
		top: var(--status-bar-height);
		/*  #endif  */ 
	
		.addr {
			width: 120upx;
			height: 60upx;
			flex-shrink: 0;
			display: flex;
			align-items: center;
			font-size: 32upx;
			color: #98a7b0;
			.icon {
				height: 60upx;
				margin-right: 5upx;
				display: flex;
				align-items: center;
				font-size: 42upx;
				color: #ffc50a;
			}
		}
		.input-box {
			width: 100%;
			height: 60upx;
			background-color: #f5f5f5;
			border-radius: 30upx;
			position: relative;
			display: flex;
			align-items: center;
			text-align: center;
			.icon {
				display: flex;
				align-items: center;
				position: absolute;
				top: 0;
				right: 0;
				width: 60upx;
				height: 60upx;
				font-size: 34upx;
				color: #c0c0c0;
			}
			input {
				padding-left: 28upx;
				height: 28upx;
				font-size: 28upx;
			}
		}
		.iconn-btn {
			width: 120upx;
			height: 60upx;
			flex-shrink: 0;
			display: flex;
			line-height: 60upx;
		}
		
		.icon-size {
		    font-size: 19px;
            margin-left: 10px;	
			
		}
	}
	.place {
		background-color: #ffffff;
		height: 100upx;
		/*  #ifdef  APP-PLUS  */
		margin-top: var(--status-bar-height);
		/*  #endif  */
	}
</style>